<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>egg</title>
    <style>
        body,html {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var ctx = canvas.getContext("2d");
    canvas.width = document.body.offsetWidth;
    canvas.height = document.body.offsetHeight;
    function draw() {
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.font = "tongti 14px";
        var eggW = ctx.measureText("egg").width;

        var x = canvas.width / 2 - eggW;
        var y = canvas.height;


        var xv = Math.ceil(Math.random() * eggW);
        Math.random() * 2 < 1 ? (xv = -xv) : true;

        var yv = -Math.ceil(14+Math.random() * 10);

        function onDraw() {
            x += xv;
            y += yv;
            if (x < 0 || x > canvas.width) {
                xv = -xv;
            }
            if (y < 0 || y > canvas.height) {
                yv = -yv;
            }

            ctx.fillText("egg", x, y);

            window.requestAnimationFrame(onDraw);
        }

        onDraw();
    }

    draw();
</script>
</body>
</html>